<template>
  <div class="focus-user m-t-1 bg-w fx-h-c">
    <img
      class="img br-5"
      :src='user.avatar'
      alt=""
    />
    <div class="msg">
      <div class="focus-msg fx-c">
        <span class="focus">{{ user.username }}</span>
        <span class="w">关注了</span>
        <span class="focus">{{ user.focusUserName }}</span>
      </div>
      <span class="occupt">{{user.job}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "FocusUser",
  props: {
    user: {
      type: Object,
      default: () => ({}),
    },
  },
};
</script>

<style lang="scss" scoped>
.focus-user {
  padding: 2rem;
  .img {
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
  }
  .msg {
    color: #8a9aa9;
    .focus-msg {
      margin-bottom: 0.5rem;
      .focus {
        color: #000;
        font-weight: bold;
      }
      .w {
        margin: 0 0.5rem;
      }
    }
    .occupt {
      font-size: 1.4rem;
    }
  }
}
</style>